<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拌嘴模拟器</title>
  <link rel="stylesheet" href="./styles/global.css">
  <link rel="stylesheet" href="./styles/variables.css">
  <link rel="stylesheet" href="./styles/responsive.css">
</head>
<body>
  <div id="app">
    <!-- 主界面布局 -->
    <div class="main-layout">
      <!-- 顶部控制栏 -->
      <div id="header"></div>
      
      <!-- 主体内容 -->
      <div class="content-area">
        <!-- 左侧角色面板 -->
        <div id="character-panel"></div>
        
        <!-- 中间对话区域 -->
        <div id="chat-area"></div>
        
        <!-- 右侧设置面板 -->
        <div id="settings-panel"></div>
      </div>
    </div>
  </div>

  <!-- 全局样式 -->
  <link rel="stylesheet" href="./components/header/header.css">
  <link rel="stylesheet" href="./components/character-panel/character-panel.css">
  <link rel="stylesheet" href="./components/chat-area/chat-area.css">
  <link rel="stylesheet" href="./components/settings-panel/settings-panel.css">
  <link rel="stylesheet" href="./components/modals/modals.css">

  <script type="module" src="./main.js"></script>
</body>
</html>
